<template>
	<view
		><custom-nav :title="'统计'"></custom-nav>
		<view class="df ac top-fixed pl10 pr10">
			<button
				class="default-button"
				v-for="item in tabList"
				:class="item.id === activeTab ? 'active-button' : ''"
				:key="item.id"
				@tap="changeTab(item)"
			>
				{{ item.text }}
			</button>
		</view>

		<custom-tabbar
			:pathType="'subPackagesIndex'"
			:pagePath="pagePath"
			:approvalNumber="approvalNumber"
		></custom-tabbar>
	</view>
</template>
<script>
import getDateFn from '@/common/getDateFn.js'
import { getTargetDay } from '@/common/utils.js'
export default {
	data() {
		return {
			pagePath: '/subPackagesIndex/pages/index/approval/statistics/index',
			tabList: [
				{ id: 'theWeek', text: '本周', value: '' },
				{ id: 'theMonth', text: '本月', value: '' },
				{ id: 'sevenDay', text: '近7日', value: -7 },
				{ id: 'thirtyDay', text: '近30日', value: -30 },
				{ id: 'custom', text: '自定义', value: '' },
			],
			approvelText: [
				'审批流程',
				'单量',
				'审批完成',
				'进行中',
				'流程平均耗时',
			],
			activeTab: 'theMonth',
			popupShow: false,
			filterStartDate: '',
			filterEndDate: '',
			personnelInitiateData: [],
			personnelApproveData: [],
			requestMap: ['personnelInitiateData', 'personnelApproveData'],
			sealRequestMap: [
				'mySealData',
				'myFileData',
				'myApproveSealData',
				'myApproveFileData',
			],
			mySealData: [],
			myFileData: [],
			myApproveSealData: [],
			myApproveFileData: [],
			sealMethodTextList: [
				'签章方式',
				'单量',
				'审批通过',
				'审批拒绝',
				'进行中',
				'已撤销',
			],
			fileTypeList: [
				'文件类别',
				'单量',
				'审批通过',
				'审批拒绝',
				'进行中',
				'已撤销',
			],
			sealTypeTextList: [
				'用印类型',
				'印章名称',
				'单量',
				'审批通过',
				'审批拒绝',
				'进行中',
				'已撤销',
			],
			navHeight: 0,
			approvalNumber: 0,
		}
	},
	onShow() {
		this.getAllData(getDateFn.getMonth('s', 0), getDateFn.getDate())
	},
	mounted() {
		this.navHeight = uni.getStorageSync('navHeight')
		this.getAllData(getDateFn.getMonth('s', 0), getDateFn.getDate())
	},
	methods: {
		seeMore(type, i, index) {
			switch (type) {
				case 'launch':
					this.$set(this.mySealData, index, {
						...i,
						isShow: !i.isShow,
					})
					break
				case 'approval':
					this.$set(this.myApproveSealData, index, {
						...i,
						isShow: !i.isShow,
					})
					break
			}
		},
		filterReset() {
			this.filterStartDate = ''
			this.filterEndDate = ''
		},
		filterSubmit() {
			this.getAllData(this.filterStartDate, this.filterEndDate)
			this.popupShow = false
		},
		// 选择开始时间
		chooseStartDate(event) {
			this.filterStartDate = event
		},
		//选择结束时间
		chooseEndDate(event) {
			this.filterEndDate = event
		},
		//关闭筛选框
		closeFilter() {
			this.popupShow = false
		},
		getAllData(startDay, endDay) {
			uni.showLoading({
				title: '加载中...',
			})
			this.requestMap.forEach((item, index) => {
				this.$request
					.request(`office-platform/wfow/statistics/${item}`, {
						method: 'post',
						data: {
							startDay,
							endDay,
						},
					})
					.then((res) => {
						uni.hideLoading()
						if (res.success) {
							if (!index) {
								this.personnelInitiateData = res.data
							} else {
								this.personnelApproveData = res.data
							}
						}
					})
			})
			this.sealRequestMap.forEach((sealItem) => {
				this.$request
					.request(`wflow/wflow/seal/data/${sealItem}`, {
						method: 'post',
						data: {
							startDate: startDay,
							endDate: endDay,
						},
					})
					.then((res) => {
						switch (sealItem) {
							case 'mySealData':
								this.mySealData = res.data.map((i) => {
									return {
										...i,
										isShow: false,
									}
								})
								break
							case 'myFileData':
								this.myFileData = res.data
								break
							case 'myApproveSealData':
								this.myApproveSealData = res.data
								break
							case 'myApproveFileData':
								this.myApproveFileData = res.data
								break
						}
					})
			})
		},
		changeTab(row) {
			let startDay = ''
			let endDay = ''
			this.activeTab = row.id
			if (row.id === 'custom') {
				this.popupShow = true
			} else {
				this.popupShow = false
				switch (row.id) {
					case 'theWeek':
						startDay = getDateFn.getMonday('s')
						endDay = getDateFn.getDate(-1)
						break
					case 'theMonth':
						startDay = getDateFn.getMonth('s', 0)
						endDay = getDateFn.getDate(-1)
						break
					case 'sevenDay':
						startDay = getTargetDay(row.value)
						endDay = getDateFn.getDate(-1)
						break
					case 'thirtyDay':
						startDay = getTargetDay(row.value)
						endDay = getDateFn.getDate(-1)
						break
				}
			}
			if (!startDay && !endDay) {
				this.personnelInitiateData = []
				this.personnelApproveData = []
			} else {
				this.getAllData(startDay, endDay)
			}
		},
	},
}
</script>
<style lang="scss" scoped>
.container {
	padding: 0;
	padding-bottom: 200rpx;
}
.data-picker-box {
	margin: 20rpx 30rpx 10rpx;
	border-radius: 6rpx;
	border: 2rpx solid rgba(217, 217, 217, 1);
	font-size: 32rpx;
}
.c1 {
	color: #c1c1c1;
}
.container-box {
	background: #fff;
	margin: 20rpx 0rpx 20rpx;
	padding: 20rpx;
	.title {
		color: #101010;
		font-size: 34rpx;
		font-weight: 700;
		margin-bottom: 20rpx;
	}
}
.table-cont {
	background-color: rgba(239, 239, 239, 0.62);
	color: rgba(108, 108, 108, 1);
	font-size: 28rpx;
	border: 1px solid rgba(239, 239, 239, 1);
	border-bottom: 0;
	border-right: 0;
	.table-tr {
		padding: 10rpx 8rpx;
		border-right: 1px solid rgba(239, 239, 239, 1);
		border-bottom: 1px solid rgba(239, 239, 239, 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.table-tr0 {
	width: 160rpx;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.table-tr1 {
	width: 70rpx;
}
.table-tr2 {
	width: 140rpx;
}
.table-tr3 {
	width: 100rpx;
}
.table-tr4 {
	width: 200rpx;
}
.tr-padding {
	padding: 10rpx;
}
.table-seal-padding {
	padding: 10rpx 4rpx;
}
.table-seal-tr0 {
	width: 150rpx;
}
.table-seal-tr1 {
	width: 80rpx;
}
.table-seal-tr2 {
	width: 120rpx;
}
.table-seal-tr3 {
	width: 120rpx;
}
.table-seal-tr4 {
	width: 100rpx;
}
.table-seal-tr5 {
	width: 100rpx;
}
.table-type-tr0 {
	width: 115rpx;
}
.table-type-tr1 {
	width: 115rpx;
}
.table-type-tr2 {
	width: 70rpx;
}
.table-type-tr3 {
	width: 120rpx;
}
.table-type-tr4 {
	width: 120rpx;
}
.table-type-tr5 {
	width: 85rpx;
}
.table-type-tr6 {
	width: 85rpx;
}
.table-type-tr-padding {
	padding: 10rpx 0;
}
.table-cont-empty {
	margin-top: -200rpx;
	padding-bottom: 40rpx;
}
.as {
	align-items: stretch;
}
.over-maxLength {
	max-height: 500rpx;
	overflow-y: auto;
}
.seal-title {
	margin-top: 30rpx;
	font-size: 32rpx;
	margin-bottom: 10rpx;
}
.border-line {
	border-right: 1px solid rgba(239, 239, 239, 1);
	border-bottom: 1px solid rgba(239, 239, 239, 1);
}
.border-line-bottom {
	border-bottom: 1px solid rgba(239, 239, 239, 1);
}
.border-line-right {
	border-right: 1px solid rgba(239, 239, 239, 1);
}
.warning-text-col {
	background: #e8effa;
	padding: 10rpx;
	margin-bottom: 20rpx;
	border-radius: 8rpx;
	color: #323233;
	image {
		margin-left: -40rpx;
		margin-right: 10rpx;
		width: 45rpx;
		height: 45rpx;
	}
}
</style>
